<template>
	<goods-card :product="product">
		<view class="bottom-btn-wrap">
			<template v-if="product.buttonType === 1">
				<stepper :product="product" :max="product.max"></stepper>
			</template>
			<template v-if="product.buttonType === 2">
				<button class="l-btn btn-primary choose-btn" hover-class="btn-hover" @click.stop="showSinglePop(product, null)">
					<text>选搭配</text>
					<badge :productId="product.id"></badge>
				</button>
			</template>
			<template v-if="product.buttonType === 3">
				<template v-for="(opt, oIndex) in setsOptions">
					<button v-if="opt.displayOrder < 0" class="l-btn choose-btn soldOut-btn">售罄</button>
					<button v-else :key="opt.productId" class="l-btn btn-primary choose-btn" hover-class="btn-hover" @click.stop="showSinglePop(product, oIndex)">
						<text>{{opt.name}}</text>
						<badge :productId="opt.productId"></badge>
					</button>
				</template>
			</template>
			<template v-if="product.buttonType === 4">
				<button class="l-btn btn-primary choose-btn" hover-class="btn-hover" @click.stop="goItemsComboPage(product)">
					<text>选规格</text>
					<badge :productId="product.id"></badge>
				</button>
			</template>
			<template v-if="product.buttonType === 5">
				<button class="l-btn choose-btn soldOut-btn">售罄</button>
			</template>
		</view>
		
		<!-- 占位用 不用管 -->
		<view class="bottom-btn-wrap-hide">
			<template v-if="product.buttonType === 3">
				<template v-for="(opt, oIndex) in setsOptions">
					<button :key="opt.id" class="l-btn btn-primary choose-btn">{{opt.name}}</button>
				</template>
			</template>
			<template v-else>
				<button class="l-btn btn-primary choose-btn">选择</button>
			</template>
		</view>
					
	</goods-card>
</template>

<script>
	import goodsCard from '@/components/goods-card/goods-card.vue';
	import stepper from '@/components/stepper/stepper.vue';
	import badge from '../badge/badge.vue';

	import {
		debounce
	} from '@/common/js/util.js';

	export default {
		name: 'GoodsCard',
		components: {
			goodsCard,
			stepper,
			badge
		},
		props: {
			product: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		computed: {
			// 显示合并尺寸按钮
			setsOptions() {
				const productsMap = this.$store.state.productsMap;
				const itemSets = this.product.itemSets;
				const setsOptions = itemSets.length ? itemSets[0].options : [];
				setsOptions.map(item => {
					let nameStr = item.name.replace(/\>/, '');
					item.name = nameStr.slice(0, 4);
					
					// buttonType === 3 售罄显示按钮
					if (this.product.buttonType === 3) {
						const pro = productsMap[item.productId] || '';
						if (pro && pro.displayOrder < 0) {
							item.displayOrder = -1;
						} else {
							item.displayOrder = 0;
						}
					}
					
					
				})
				
				return setsOptions;
			},
		},
		mounted() {
			if (this.product.buttonType === 3) {
				const itemSets = this.product.itemSets;
				const setsOptions = itemSets[0].options;
				const firstPid = setsOptions[0].productId;
				const productsMap = this.$store.state.productsMap;
				// 第一个产品价格
				const singleProduct = productsMap[firstPid] || '';
				this.product.basePrice = singleProduct ? singleProduct.basePrice : 0;
				
			}
		},
		methods: {
			// 去选组合(规格)页面
			goItemsComboPage(product) {
				uni.showToast({
					title: '去选套餐页面',
					icon: 'none'
				})
			},

			// 显示选单商品弹窗
			showSinglePop: debounce(function(product, idx) {
				const productsMap = this.$store.state.productsMap;

				let productId = '';
				if (idx != null) {
					productId = product.itemSets[0].options[idx].productId;
				}

				const productInfo = idx != null ? productsMap[productId] : product;

				if (!productInfo) {
					uni.showToast({
						title: '当前产品不在产品库中',
						icon: 'none'
					})
					return;
				}

				if (productInfo.displayOrder < 0) {
					uni.showToast({
						title: '此产品已售罄',
						icon: 'none'
					})
					return;
				}

				if (!productInfo.isAvailable) {
					uni.showToast({
						title: '此产品不在售卖时间内',
						icon: 'none'
					})
					return;
				}


				// 给单品窗口传值
				this.$store.commit('handleSingleProductInfo', {
					product: productInfo,
					childProIdx: idx
				});

				// 显示单品窗口
				this.$store.commit('handleShowSinglePop', true);
			}, true)
		}
	};
</script>

<style lang="less" scoped>
	@import './goods.less';
</style>
